<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="title">创建预约订单</view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 联系和位置信息 -->
      <view class="form-section">
        <view class="section-title">联系和位置信息</view>
        
        <view class="form-item">
          <text class="label">联系电话</text>
          <input 
            class="input-field" 
            type="number" 
            v-model="formData.phone" 
            placeholder="请输入联系电话"
            maxlength="11"
          />
        </view>

        <view class="form-item">
          <text class="label">所在区域</text>
          <view class="picker-field" @click="showAreaPicker">
            <text class="picker-text" :class="{ placeholder: !formData.area }">
              {{ formData.area || '选择所在区域' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>

        <view class="form-item">
          <text class="label">小区街道</text>
          <input 
            class="input-field" 
            v-model="formData.address" 
            placeholder="小区或街道名"
          />
        </view>
      </view>

      <!-- 家教详情 -->
      <view class="form-section">
        <view class="section-title">家教详情</view>
        
        <view class="form-item">
          <text class="label">家教方式</text>
          <view class="picker-field" @click="showMethodPicker">
            <text class="picker-text" :class="{ placeholder: !formData.method }">
              {{ formData.method || '选择家教方式' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>

        <view class="form-item">
          <text class="label">家教科目</text>
          <view class="picker-field" @click="showSubjectPicker">
            <text class="picker-text" :class="{ placeholder: !formData.subject }">
              {{ formData.subject || '选择家教科目' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>

        <view class="form-item">
          <text class="label">家教薪酬</text>
          <view class="picker-field" @click="showSalaryPicker">
            <text class="picker-text" :class="{ placeholder: !formData.salary }">
              {{ formData.salary || '选择意向出价' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>

        <view class="salary-reference" @click="viewSalaryReference">
          <text class="reference-text">查看教员薪酬参考</text>
          <text class="reference-icon">📤</text>
        </view>
      </view>

      <!-- 要求和安排 -->
      <view class="form-section">
        <view class="section-title">要求和安排</view>
        
        <view class="form-item">
          <text class="label">学员概况</text>
          <textarea 
            class="textarea-field" 
            v-model="formData.studentProfile" 
            placeholder="如性别,年级,科目,成绩等.."
            maxlength="200"
          />
        </view>

        <view class="form-item">
          <text class="label">教员要求</text>
          <textarea 
            class="textarea-field" 
            v-model="formData.teacherRequirements" 
            placeholder="如性别,性格,资历,经验等.."
            maxlength="200"
          />
        </view>

        <view class="form-item">
          <text class="label">课时安排</text>
          <textarea 
            class="textarea-field" 
            v-model="formData.schedule" 
            placeholder="如周一到周五晚上7-9点.."
            maxlength="200"
          />
        </view>
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view class="bottom-actions">
      <view class="action-buttons">
        <u-button type="primary" :plain="true" text="联系客服" icon="chat" @click="contactService"></u-button>
        <u-button type="primary" text="创建预约订单" @click="createOrder"></u-button>
      </view>
    </view>

    <!-- 选择器组件 -->
    <!-- 区域选择器 -->
    <u-picker 
      :show="areaPickerShow" 
      :columns="areaColumns" 
      @confirm="confirmArea" 
      @cancel="areaPickerShow = false"
      title="选择所在区域"
    ></u-picker>

    <!-- 家教方式选择器 -->
    <u-picker 
      :show="methodPickerShow" 
      :columns="methodColumns" 
      @confirm="confirmMethod" 
      @cancel="methodPickerShow = false"
      title="选择家教方式"
    ></u-picker>

    <!-- 科目选择器 -->
    <u-picker 
      :show="subjectPickerShow" 
      :columns="subjectColumns" 
      @confirm="confirmSubject" 
      @cancel="subjectPickerShow = false"
      title="选择家教科目"
    ></u-picker>

    <!-- 薪酬选择器 -->
    <u-picker 
      :show="salaryPickerShow" 
      :columns="salaryColumns" 
      @confirm="confirmSalary" 
      @cancel="salaryPickerShow = false"
      title="选择意向出价"
    ></u-picker>
  </view>
</template>

<script>
/**
 * 预约订单创建页面
 * 用于创建家教预约订单
 */
export default {
  name: 'BookingPage',
  data() {
    return {
      // 表单数据
      formData: {
        phone: '17682344707', // 默认联系电话
        area: '',
        address: '',
        method: '',
        subject: '',
        salary: '',
        studentProfile: '',
        teacherRequirements: '',
        schedule: ''
      },
      
      // 选择器显示状态
      areaPickerShow: false,
      methodPickerShow: false,
      subjectPickerShow: false,
      salaryPickerShow: false,
      
      // 区域数据
      areaColumns: [
        ['南昌市', '九江市', '景德镇市', '萍乡市', '新余市', '鹰潭市', '赣州市', '宜春市', '上饶市', '吉安市', '抚州市']
      ],
      
      // 家教方式数据
      methodColumns: [
        ['上门辅导', '在线辅导', '机构辅导', '混合模式']
      ],
      
      // 科目数据
      subjectColumns: [
        ['小学语文', '小学数学', '小学英语', '初中语文', '初中数学', '初中英语', '高中语文', '高中数学', '高中英语', '物理', '化学', '生物', '政治', '历史', '地理']
      ],
      
      // 薪酬数据
      salaryColumns: [
        ['50-80元/小时', '80-120元/小时', '120-150元/小时', '150-200元/小时', '200-300元/小时', '300元以上/小时']
      ]
    }
  },
  methods: {

    viewSalaryReference() {
      uni.navigateTo({
        url: '/pages/jiajiao/salary-reference'
      })
    },
    /**
     * 显示区域选择器
     */
    showAreaPicker() {
      this.areaPickerShow = true
    },

    /**
     * 显示家教方式选择器
     */
    showMethodPicker() {
      this.methodPickerShow = true
    },

    /**
     * 显示科目选择器
     */
    showSubjectPicker() {
      this.subjectPickerShow = true
    },

    /**
     * 显示薪酬选择器
     */
    showSalaryPicker() {
      this.salaryPickerShow = true
    },

    /**
     * 确认区域选择
     * @param {Object} e 选择结果
     */
    confirmArea(e) {
      this.formData.area = e.value[0]
      this.areaPickerShow = false
    },

    /**
     * 确认家教方式选择
     * @param {Object} e 选择结果
     */
    confirmMethod(e) {
      this.formData.method = e.value[0]
      this.methodPickerShow = false
    },

    /**
     * 确认科目选择
     * @param {Object} e 选择结果
     */
    confirmSubject(e) {
      this.formData.subject = e.value[0]
      this.subjectPickerShow = false
    },

    /**
     * 确认薪酬选择
     * @param {Object} e 选择结果
     */
    confirmSalary(e) {
      this.formData.salary = e.value[0]
      this.salaryPickerShow = false
    },

    /**
     * 联系客服
     */
    contactService() {
      uni.showModal({
        title: '联系客服',
        content: '是否拨打客服电话？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '正在为您转接客服',
              icon: 'none'
            })
          }
        }
      })
    },

    /**
     * 创建预约订单
     */
    createOrder() {
      // 表单验证
      if (!this.validateForm()) {
        return
      }

      uni.showModal({
        title: '确认创建',
        content: '确定要创建这个预约订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里可以调用API创建订单
            console.log('创建订单数据:', this.formData)
            
            uni.showToast({
              title: '订单创建成功',
              icon: 'success',
              duration: 2000
            })
            
            // 延迟跳转回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          }
        }
      })
    },

    /**
     * 表单验证
     * @returns {boolean} 验证结果
     */
    validateForm() {
      const { phone, area, address, method, subject, salary } = this.formData
      
      if (!phone) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return false
      }
      
      if (!area) {
        uni.showToast({
          title: '请选择所在区域',
          icon: 'none'
        })
        return false
      }
      
      if (!address) {
        uni.showToast({
          title: '请输入小区街道',
          icon: 'none'
        })
        return false
      }
      
      if (!method) {
        uni.showToast({
          title: '请选择家教方式',
          icon: 'none'
        })
        return false
      }
      
      if (!subject) {
        uni.showToast({
          title: '请选择家教科目',
          icon: 'none'
        })
        return false
      }
      
      if (!salary) {
        uni.showToast({
          title: '请选择家教薪酬',
          icon: 'none'
        })
        return false
      }
      
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 120rpx; /* 为底部按钮留出空间 */
}

/* 页面标题 */
.header {
  background: white;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* 表单容器 */
.form-container {
  padding: 20rpx;
}

/* 表单区块 */
.form-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

/* 输入框 */
.input-field {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: #ff6b35;
  background: white;
}

/* 选择器字段 */
.picker-field {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.picker-field:active {
  background: #e9ecef;
  border-color: #ff6b35;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.picker-text.placeholder {
  color: #999;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
  margin-left: 16rpx;
}

/* 文本域 */
.textarea-field {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx 24rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  resize: none;
}

.textarea-field:focus {
  border-color: #ff6b35;
  background: white;
}

/* 薪酬参考 */
.salary-reference {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  padding: 16rpx;
  background: #f0f8ff;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.salary-reference:active {
  background: #e6f3ff;
  transform: scale(0.98);
}

.reference-text {
  font-size: 24rpx;
  color: #ff6b35;
  margin-right: 8rpx;
}

.reference-icon {
  font-size: 20rpx;
  color: #ff6b35;
}

// 底部固定按钮
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 20rpx;
  border-top: 2rpx solid #f0f0f0;
  z-index: 100;
  margin-top: 20rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .form-container {
    padding: 15rpx;
  }
  
  .form-section {
    padding: 20rpx;
  }
  
  .section-title {
    font-size: 28rpx;
  }
  
  .label {
    font-size: 26rpx;
  }
  
  .input-field,
  .picker-field {
    height: 80rpx;
    font-size: 26rpx;
  }
  
  .textarea-field {
    font-size: 26rpx;
  }
}
</style>
